<template>
  <div class="app-container d-container">
    <!-- 卡片面板主区域 -->
    <el-card>
      <!-- 搜索nav栏 -->
      <div class="filter-bar">
        <!-- 搜索框 -->
        <div class="filter-left">
          <el-form ref="SearchFrom" :model="inputValue" style="margin-right:15px">
            <el-form-item style="width: 200px;" prop="name">
              <el-input clearable @clear="clearSearch" style="height: 32px;width:200px" placeholder="根据用户名搜索" v-model="inputValue.name"></el-input>
            </el-form-item>
          </el-form>
          <div style="margin-top:2px">
            <!-- 清除按钮 -->
            <el-button size="small" @click="clearSearch">清除</el-button>
            <!-- 搜索按钮 -->
            <el-button size="small" type="primary" @click="clickSearch">搜索</el-button>
          </div>
        </div>
        <!-- 新增学科按钮 -->
        <div class="filter-right">
          <el-button class="colright" size="mini" type="success" icon="el-icon-edit" @click="clickAdd">新增学科</el-button>
        </div>
      </div>
      <!--   消息文案  alert组件 -->
      <el-alert :title="`共${counts}条记录`" :closable="false" type="info" show-icon> </el-alert>
      <!-- 表格区域 -->
      <user-table :userList="userList" @openEdit="clickEdit" @updateList="getUsersList" :value="params.page" @input="params.page--"></user-table>
      <!-- <br /> -->
      <!-- 分页器 -->
      <br />
      <div>
        <el-pagination
          style="text-align: right"
          background
          :page-sizes="[2, 4, 6, 8, 10]"
          :page-size="params.pagesize"
          :current-page="params.page"
          :total="counts"
          layout=" prev, pager, next,sizes, jumper"
          @size-change="sizeChange"
          @current-change="numChange"
        >
        </el-pagination>
      </div>
      <!-- 弹框 -->
      <el-dialog class="addDialog" :title="clickState == 'add' ? '新增标签' : '修改标签'" :visible.sync="isDialog" width="50%" style="height:500px">
        <user-add :isState="clickState" :getPermissions="permissionsList" v-if="isDialog" @close="closeDia" :getEditValue="editValue"></user-add>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, simple } from '@/api/base/users'
import { simple as permissionsList } from '@/api/base/permissions'
import userTable from '@/module-manage/components/user-table'
import userAdd from '@/module-manage/components/user-add'
export default {
  name: 'base-users',
  components: {
    userTable,
    userAdd
  },
  created() {
    this.getUsersList()
    this.getSimpleList()
    this.getPermissions()
  },
  data() {
    return {
      clickState: '', //存放添加还是修改
      inputValue: {
        name: ''
      },
      userList: [], //存放用户列表数据
      simpleList: [], //存放简易用户列表
      permissionsList: [], //存放简易权限组列表
      counts: null, //数据总数
      params: {
        page: 1, //当前页数
        pagesize: 2, //每页条数
        username: null, //名称
        disabled: null //是否屏蔽 1屏蔽  0开启
      },
      isDialog: false, //弹框显示
      editValue: {} //点击项的数据
    }
  },
  methods: {
    //   获取用户列表
    async getUsersList() {
      try {
        let { data: res } = await list(this.params)
        this.counts = res.counts
        this.userList = res.list
      } catch (error) {
        console.log(error)
        this.$message.error('获取用户列表失败')
      }
    },
    // 获取简易用户列表
    async getSimpleList() {
      try {
        let { data: res } = await simple()
        this.simpleList = res
      } catch (error) {
        console.log(error)
        this.$message.error('获取用户列表失败')
      }
    },
    // 获取简易权限组列表
    async getPermissions() {
      try {
        let { data: res } = await permissionsList()
        this.permissionsList = res
      } catch (error) {
        console.log(error)
        this.$message.error('获取权限组列表失败')
      }
    },
    sizeChange(val) {
      //val是最新的每页数量
      this.params.pagesize = val
      this.getUsersList()
    },
    numChange(val) {
      //val是最新的页码数
      this.params.page = val
      this.getUsersList()
    },
    // 清除按钮的点击事件
    clearSearch() {
      this.$refs.SearchFrom.resetFields()
      this.params.username = null
      this.params.page = 1
      this.getUsersList()
    },
    // 搜索按钮的点击事件
    clickSearch() {
      this.params.username = this.inputValue.name
      this.params.page = 1
      this.getUsersList()
    },
    // 点击添加事件
    clickAdd() {
      this.clickState = 'add'
      this.isDialog = true
    },
    // 点击修改时间
    clickEdit(val) {
      this.editValue = val
      this.clickState = 'edit'
      this.isDialog = true
    },
    // 关闭弹框
    closeDia() {
      this.getUsersList()
      this.isDialog = false
      this.clickState = ''
    }
  }
}
</script>

<style lang="less">
.d-container {
  padding: 10px;
  .colInput {
    height: 36px;
  }
  .colright {
    float: right;
    height: 35px;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .filter-bar {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .filter-left {
      height: 32px;
      display: flex;
      justify-content: space-around;
    }
  }
  .el-dialog__wrapper {
    height: 1000px !important;
  }
}
</style>
